<template>
  <div class="container">
    <div>
      <div>
        <span @click="$router.back(-1)"
              class="back">{{$t('page.back')}}{{$t('page.list')}}</span> > {{$route.query.name}}（{{$route.query.time}}）
      </div>
    </div>

    <div class="container-body"
         v-loading="loading">

      <template>
        <div class="title-space">
          <span>{{$t('page.ODvalue')}}：</span>
        </div>

        <div class="overflow">
          <table id="table-1"
                 width="100%"
                 v-for="(listItem,listIndex) in originalData">

            <tr v-for="(table,key,index) in listItem"
                :key="index">
              <td class="color-000">{{key!=='time'?key:'孔'}}</td>
              <td>
                <span v-if="key!=='time'">
                  {{crpValue[index-1]}}
                </span>
                <span class="color-000"
                      v-else>
                  {{$t('page.label')}}(μg/ml)
                </span>
              </td>
              <td v-for="iTable in table">
                <span v-if="key!=='time'">{{iTable}}</span>
                <span class="color-000"
                      v-else>{{iTable + 's'}}</span>
              </td>
            </tr>
          </table>
        </div>

        <div class="title-space">
          <span>RU相对变化率（%）：</span>
        </div>

        <div class="overflow">
          <table id="table-1"
                 width="100%"
                 v-for="(listItem,listIndex) in originalDataRate">

            <tr v-for="(table,key,index) in listItem"
                :key="index">
              <td class="color-000">{{key!=='time'?key:'孔'}}</td>
              <td>
                <span v-if="key!=='time'">
                  {{crpValue[index-1]}}
                </span>
                <span class="color-000"
                      v-else>
                  浓度(μg/ml)
                </span>
              </td>
              <td v-for="iTable in table">
                <span v-if="key!=='time'">{{iTable}}</span>
                <span class="color-000"
                      v-else>{{iTable + 's'}}</span>
              </td>
            </tr>
          </table>
        </div>

        <div class="space text-center">
          <div class="chart"
               v-for="(chart,index) in allStepOneCharts">
            <easyChart :id="'StepOne'+index"
                       :data='chart'></easyChart>
          </div>
        </div>

        <div class="title-space">
          <span>计算结果：</span>
          <el-button type="text"
                     @click="downloadExl()"
                     size="mini">{{$t('page.exportTable')}}</el-button>
        </div>

        <div class="title-space">
          <span>{{$t('page.molecular')}}（Da）：</span>
          {{mole}}
        </div>

        <div class="space">
          <div class="overflow">
            <table id="table-1"
                   width="100%">
              <template v-for="stepTwoItem,TwoIndex in stepTwoList">
                <tr :key="TwoIndex"
                    v-for="(table,key,index) in stepTwoItem">
                  <td class="color-000">
                    <span v-if="key!=='title'">{{key}}</span>
                    <span v-else>孔</span>
                  </td>
                  <td v-for="iTable in table"
                      v-if="key ==='title'"
                      class="color-000">
                    <span v-html="iTable"></span>
                  </td>
                  <td v-for="iTable in table"
                      v-if="key !=='title'">
                    <span :style="{color:iTable===extA?'#409eff':''}"
                          v-if="iTable===extA"> (推荐){{iTable}}</span>
                    <span v-else> {{iTable}}</span>
                  </td>
                </tr>
              </template>
            </table>
          </div>

          <div class="img-list"
               v-for="img,index in imgList"
               :key="index"
               style="width:60%;float:left;">
            <div class="img-item">
              <img :src="img"
                   alt="">
            </div>
          </div>

          <div style="width:40%;float:left;padding-left:50px;margin-top:25px;">
            <table id="table-2"
                   width="100%">
              <tr>
                <td width="50%">
                  公式
                </td>
                <td>
                  y=x*Rmax/(x+KD)
                </td>
              </tr>
              <tr>
                <td width="50%">{{$t('page.parameter')}}</td>
                <td>
                  <span class="data-item">Ka:{{parameter[1]}}</span>
                  <span class="data-item">Kd:{{parameter[2]}}</span>
                  <span class="data-item">KD:{{parameter[3]}}</span>
                </td>
              </tr>

              <tr>
                <td width="50%">浓度值</td>
                <td>
                  <span class="data-item">{{parameter[0]}}</span>
                </td>
              </tr>
            </table>
          </div>

        </div>
      </template>

      <div class="space text-center">
      </div>

    </div>
  </div>
</template>

<script>
import easyChart from '@/components/EasyChart'
import { fetchHistoryDetail } from '@/api/table'
export default {
  data() {
    return {
      loading: true,
      stepTwoList: [],
      originalData: [],
      originalDataRate: [],
      lightValue: [],
      lightRate: [],
      allLightRateCharts: [],
      allStepOneCharts: [],
      waveLength: [],
      waveLengthDiff: {},
      waveCharts: [],
      exlName: '',
      mole: '',
      unitTitle: [],
      tableTop: [],
      extA: '',
      imgList: '',
      parameter: [],
    }
  },
  components: {
    easyChart,
  },
  mounted() {
    this.getHistoryDetail()
  },
  methods: {
    async getHistoryDetail() {
      const res = await fetchHistoryDetail({
        id: this.$route.query.id,
      })
      this.loading = false
      this.mole = res.data[0].mole
      const data = JSON.parse(res.data[0].resultData)
      this.originalData = data.originalData
      this.originalDataRate = data.originalDataRate
      this.lightValue = data.lightValue
      this.lightRate = data.lightRate
      this.imgList = data.imgList
      this.extA = data.extA
      this.crpValue = JSON.parse(res.data[0].crpValue)
      let loctionTitle = data.unitTitle
      loctionTitle.forEach((item) => {
        let title = []
        item.forEach((titleItem, index) => {
          if (index === 4) {
            const sub = `K<sub>a</sub>(10<sup>${titleItem}</sup>M<sup>-1</sup>S<sup>-1</sup>)`
            title.push(sub)
          } else if (index === 5) {
            const sub = `K<sub>d</sub>(10<sup>${titleItem}</sup>S<sup>-1</sup>)`
            title.push(sub)
          } else if (index === 6) {
            const sub = `K<sub>d</sub>(10<sup>${titleItem}</sup>S<sup>-1</sup>)`
            title.push(sub)
          } else {
            title.push(titleItem)
          }
        })
        const data = {}
        data.equa = title
        this.unitTitle.push(data)
      })
      this.stepTwoList = data.finalResult
      this.stepTwoList.forEach((dataListItem) => {
        for (let i in dataListItem) {
          if (dataListItem[i].indexOf(this.extA) === 0) {
            this.parameter = dataListItem[i]
          }
        }
      })
      const stepTwoTitle = { title: this.unitTitle[0].equa }
      this.stepTwoList.unshift(stepTwoTitle)
      this.stepTwoList.map((listItem) => {
        for (let i in listItem) {
          listItem[i].splice(1, 3)
        }
      })
      this.drawChart()
    },
    sortObj(obj) {
      var arr = []
      for (var i in obj) {
        arr.push([obj[i], i])
      }
      arr.reverse()
      var len = arr.length
      var obj = {}
      for (var i = 0; i < len; i++) {
        obj[arr[i][1]] = arr[i][0]
      }
      return obj
    },
    downloadExl() {
      const href = `${process.env.BASE_URL}receive/download/excel/1/${this.exlName}`
      window.open(href, '_blank')
    },
    drawChart() {
      this.allLightRateCharts = []
      this.allStepOneCharts = []
      this.lightRate.forEach((item, index, arry) => {
        let chartsOption = {
          title: {
            text: '',
          },
          animation: false,
          tooltip: {
            trigger: 'axis',
          },
          legend: {
            icon: 'circle',
            data: [],
          },
          grid: {
            left: '3%',
            right: '5%',
            bottom: '15%',
            containLabel: true,
          },
          dataZoom: [
            {
              type: 'slider',
              height: 15,
              handleSize: '140%',
              handleStyle: {
                color: '#999',
              },
              xAxisIndex: 0,
              filterMode: 'empty',
            },
            {
              type: 'slider',
              width:  15,
              handleSize: '140%',
              handleStyle: {
                color: '#999',
              },
              yAxisIndex: 0,
              filterMode: 'empty',
            },
          ],
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
          xAxis: {
            type: 'category',
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              onZero: false,
            },
            boundaryGap: false,
            data: [],
          },
          yAxis: {
            type: 'value',
            splitNumber: 8,
          },
          series: [],
        }
        chartsOption.series = []
        chartsOption.xAxis.data = []
        let num = 0
        for (let i in item) {
          if (i !== 'time') {
            let chartSeries = {
              name: `${this.crpValue[num]}μg/ml`,
              type: 'line',
              // smooth: true,
              showSymbol: false,
              hoverAnimation: false,
              data: item[i],
            }
            chartsOption.title.text = '光强相对变化率曲线'
            chartsOption.legend.data.push(`${this.crpValue[num]}μg/ml`)
            chartsOption.series.push(chartSeries)
            num++
          } else {
            chartsOption.xAxis.data = item[i]
          }
        }
        this.allLightRateCharts.push(chartsOption)
      })
      this.originalDataRate.forEach((item, index, arry) => {
        let chartsOption = {
          title: {
            text: '',
          },
          animation: false,
          tooltip: {
            trigger: 'axis',
          },
          legend: {
            icon: 'circle',
            data: [],
          },
          grid: {
            left: '3%',
            right: '5%',
            bottom: '15%',
            containLabel: true,
          },
          dataZoom: [
            {
              type: 'slider',
              height: 15,
              handleSize: '140%',
              handleStyle: {
                color: '#999',
              },
              xAxisIndex: 0,
              filterMode: 'empty',
            },
            {
              type: 'slider',
              width:  15,
              handleSize: '140%',
              handleStyle: {
                color: '#999',
              },
              yAxisIndex: 0,
              filterMode: 'empty',
            },
          ],
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
          xAxis: {
            type: 'category',
            axisTick: {
              alignWithLabel: true,
            },
            boundaryGap: false,
            minInterval: 120,
            data: [],
          },
          yAxis: {
            type: 'value',
            splitNumber: 8,
            // minInterval: 0.1
            // min: value => {
            //   return value.min;
            // }
          },
          series: [],
        }
        chartsOption.series = []
        chartsOption.xAxis.data = []
        let num = 0
        for (let i in item) {
          if (i !== 'time') {
            let chartSeries = {
              name: `${this.crpValue[num]}μg/ml`,
              type: 'line',
              // smooth: true,
              showSymbol: false,
              hoverAnimation: false,
              data: item[i],
            }
            chartsOption.title.text = 'RU相对变换率曲线'
            chartsOption.legend.data.push(`${this.crpValue[num]}μg/ml`)
            chartsOption.series.push(chartSeries)
            num++
          } else {
            chartsOption.xAxis.data = item[i]
          }
        }
        this.allStepOneCharts.push(chartsOption)
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
}
.back {
  color: #028cdf;
  cursor: pointer;
}
table {
  border-collapse: collapse;
  text-align: center;
  white-space: nowrap;
  margin-bottom: 20px;
}
.img-list {
  width: 1000px;
  display: flex;
  flex-wrap: wrap;
}
.img-item {
  width: 500px;
}

#table-2 {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #000;
}
#table-2 tr {
  border: 1px solid #000 !important;
}

#table-2 td:first-child {
  border-left: 1px solid #000;
}

/* Padding and font style */
#table-2 td,
#table-2 th {
  padding: 10px 15px;
  font-size: 12px;
  font-family: Verdana;
  border-right-width: 1px;
  border-right-style: solid;
}

.data-item {
  display: block;
}

@media screen and (min-width: 1000px) {
  .data-item {
    display: inline-block;
    margin-right: 20px;
  }
}
</style>